<route lang="json5">
{
  style: {
    navigationBarTitleText: '大转盘',
  },
}
</route>
<template>
  <view class="page-container min-h-screen pb-8 bg-custom" :style="customBg">
    <!-- Floating Menu -->
    <view class="sticky top-0 z-10 bg-white/80 backdrop-blur-sm shadow-md">
      <view class="flex justify-around py-3 px-2">
        <view v-for="(item, index) in configList" :key="index" class="flex flex-row items-center">
          <view class="text-xs font-medium text-center text-gray-700 flex flex-row">
            <i class="iconfont icon-icon-dazhuanpan text-3 w-5"></i>
            <text class="mr-1 text-gray-700">{{ item.name }}</text>
            <text class="text-black">{{ item.value }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- Main Content -->
    <view class="px-4 pt-6">
      <Lottle></Lottle>
      <view class="mb-4">
        <view class="text-xl font-bold text-black mb-4 tag-l pl-4">合作商家</view>
        <view class="grid grid-cols-2 gap-3">
          <view v-for="(merchant, index) in merchants" :key="index"
            class="bg-white rounded-lg overflow-hidden shadow-md" @click="toPage(merchant)">
            <image :src="parseImage(merchant.picture)" :alt="merchant.name" class="w-full h-32 object-cover" />
            <view class="p-2">
              <view class="font-medium text-gray-800 truncate">{{ merchant.name }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { Users, Award, Gift, Eye, Trophy, Medal, Heart, Star } from 'lucide-vue-next'
import Lottle from '@/components/Lottle.vue'
import { http } from '@/utils/http'

const configList = ref([])

const customBg = ref({})

const getConfig = async () => {
  let res = await http.get('/api/config/list')
  if (res.code == 200) {
    configList.value = res.data.list.filter((item) => {
      return item.code.indexOf('dzp') != -1
    })
    console.log('res', res)
  }

  let res1 = await http.get('/api/config/list', { code: 'throttleimg' })
  if (res1.code == 200) {
    customBg.value = { backgroundImage: `url(${res1.data.list[0].value})` }
    console.log(
      '%c [ customBg.value ]-71',
      'font-size:13px; background:#333333; color:#f3f3f3;',
      customBg.value,
    )
  }
}

const parseImage = (images) => {
  if (!images) {
    return ''
  } else {
    return images.split(',')[0]
  }
}

getConfig()

const menuItems = [
  { name: '关注粉丝', icon: 'Users' },
  { name: '已领福利', icon: 'Gift' },
  { name: '浏览量', icon: 'Eye' },
]

const toPage = (store) => {
  console.log('store', store)

  uni.navigateTo({
    url: '/pages/store/detail?id=' + store.id,
  })
}

const parsePrizeImageList = computed(() => {
  return prizes.value.map((item) => {
    return item?.prizeImage || ''
  })
})

const prizes = ref([])
const getPrizes = async () => {
  let res = await http.get('/api/turntable/list')
  if (res.code == 200) {
    console.log('res', res)
    prizes.value = res.data.list
  }
}

const merchants = ref([])

const getMerchants = async () => {
  let res = await http.get('/api/store/list', { pageNum: 1, pageSize: 10 })
  if (res.code == 200) {
    console.log('res', res)
    merchants.value = res.data.list
  }
}

onLoad(() => {
  getPrizes()
  getMerchants()
})

onShareAppMessage(() => {
  return {
    title: '邻里生活荟',
    path: '/pages/turntable/index',
  }
})
onShareTimeline(() => {
  return {
    title: '邻里生活荟',
    path: '/pages/turntable/index',
  }
})
</script>

<style scoped>
.bg-custom {
  /* background-image: url('http://llcdn.jxsr.com/mainback1.png'); */
  background-size: cover;
}

.prize-wheel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.wheel-section {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background-color: var(--section-color);
  transform-origin: bottom left;
}
</style>
